<template>
  <div id="container">
    <h1 class="titlex">订单详情</h1>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="description" label="充值产品" width="180"> </el-table-column>
    <el-table-column prop="price" label="单价" width="180"> </el-table-column>
    <el-table-column prop="count" label="数量">
      <template v-slot="scope">
        <el-input-number
          v-model="num"
          @change="handleChange"
          :min="1"
          label="描述文字"
        ></el-input-number>
      </template>
    </el-table-column>
    <el-table-column prop="totalprice" label="小计"> </el-table-column>
  </el-table>
    <div id="box">
        <div class="box">
            <p>实付款：{{xiaoji}}</p>
            <p>充值详情：{{tableData[0].description}}</p>
            <p>充值账户：{{UserName}}</p>
        </div>
        <el-row>
            <el-button type="success" plain @click="tjdd">提交订单</el-button>
        </el-row>
    </div>
  </div>
</template>
<script>
import * as api from '@/api'
export default {
  data() {
    return {
        UserName:"",
        lssj:{},
        num: 1,
        tableData: [
            {
                description: "",
                price: 0,
                count: 1,
                totalprice: 0,
            }
        ],
        currentUser:"",
        xiaoji:0,
    };
  },
  mounted() {
    this.fn();
    this.tableData[0].totalprice=this.num*this.tableData[0].price
    this.xiaoji=this.num*this.tableData[0].price
    this.UserName=JSON.parse(localStorage.getItem("qf-userInfo")).nickname
  },
  methods: {
    fn() {
      // console.log(JSON.parse(localStorage.getItem("ddsj")));
      // console.log(this.$route.params.row);
      //拿本地订单数据
      this.lssj = JSON.parse(localStorage.getItem("ddsj")) || []
      console.log(this.lssj);
      this.tableData[0].description = this.lssj.description
      this.tableData[0].price = this.lssj.price
      this.currentUser=this.lssj.updator
    },
    handleChange(){
        this.tableData[0].totalprice=this.num*this.tableData[0].price
        this.xiaoji=this.num*this.tableData[0].price
    },
    tjdd(){
        console.log("点提交了");
        //发提交请求，后端返回生产的订单号，提交订单
        let product_id = this.lssj.product_id
        let quantity =  this.num
        api.createPreOrderApi(product_id,quantity)
        .then(res=>{
          console.log(res.data.order_id);
          this.$router.push({
            name:"pay",
            params:{
              order_id : res.data.order_id
            }
          })
        })
        //跳转支付页面，携带订单号
        //在支付页面根据携带的订单号发请求   根据返回的数据详情渲染页面
        //支付页面还需发送支付请求
    }
  },
};
</script>
<style scoped lang="less">
    .titlex{
        margin:30px 0 10px 0;
    }
    #box{
        .box{
            border:2px red solid;
        }
    }
</style>
